<template>
   <el-form :inline="true" :model="activityQuery" :rules="activeRule">
    <el-form-item label="负责人"  width="300px">
      <el-select
        v-model="activityQuery.ownerId"
        placeholder="请选择负责人"
          @change="handleChange"
        clearable
      >
        <el-option v-for="item in ownerList" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="活动名称">
      <!-- <el-select
        v-model="activityQuery.name"
        placeholder="请输入活动名称"
        clearable
      >
        <el-option label="活动一" value="01" />
        <el-option label="活动一" value="02" /> -->
        <el-input v-model="activityQuery.name" placeholder="请输入活动名称" clearable />
      <!-- </el-select> -->
    </el-form-item>
    <el-form-item label="活动时间">
        <el-date-picker
        v-model="activityQuery.activityTime"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable />
    </el-form-item>

    <el-form-item label="创建时间">
        <el-date-picker
        v-model="activityQuery.createTime"
        type="datetime"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择创建时间"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="onRest">重置</el-button>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="add('insert')">录入市场活动</el-button>
    </el-form-item>
    <el-form-item>
        <el-button type="danger" @click="batcDeleted('batchDeleted')">批量删除</el-button>
    </el-form-item>
  </el-form>
    <el-table :data="activityList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="120" property="id"></el-table-column>
        <el-table-column property="ownerDO.name" label="负责人" width="120" />
        <el-table-column property="name" label="活动名称" width="120" show-overflow-tooltip />        
        <el-table-column property="startTime" label="开始时间" />
        <el-table-column property="endTime" label="结束时间" />
        <el-table-column property="cost" label="活动预算" />
        <el-table-column property="createTime" label="创建时间" />
        <el-table-column label="操作" width="240">
            <!-- <el-button type="primary" @click="shouDetai(scope.row)">详情</el-button> -->
            <template #default="scope">
                <el-button type="primary" @click="shouDetail(scope.row)">详情</el-button>
                <el-button type="success" @click="update(scope.row)">编辑</el-button>
                <el-button type="danger" @click="openDailog('delete', scope.row)">删除</el-button>
            </template>
        </el-table-column>
      
    </el-table>
    <el-pagination background layout="prev, pager, next" :total=total :page-size=pageSize @change="changePage" />

</template>

<script lang="ts" setup>
import { reactive,ref,onMounted } from 'vue'
import Request from '../http/Request';
import { ElTable } from 'element-plus'
import router from '../router/router';

const activeRule = {
    cost: [
        { pattern: /^[0-9]+(\.[0-9]{2})?$/, message: '请输入数字', trigger: 'blur' }
    ]
}


const activityQuery = reactive({
    ownerId: '',
    name: '',
    activityTime: '',
    cost:'',
    createTime: ''

})

const onSubmit = () => {
    getData()
  console.log('submit!')
}
const onRest = () => {
  console.log('reset!')
}
const add = (type: string) => {
    // router.push('activity/add')
    router.push({
        name: 'activityDetail',
    })
}
const batcDeleted = (type: string) => {
  console.log('batchDeleted!')
}
const shouDetail = (row: any) => {
  router.push(
    {  path: 'activity/'+row.id
    }
  )
}
const openDailog = (type: string, row: any) => {    
}

const activityList = ref([
])
//总条数
const total = ref(100)
//每页条数
const pageSize = ref(10)

const current = ref();


const changePage = function (currentPage, pageSize) {
    current.value=currentPage
    getData()
}

const handleSelectionChange = (val: any) => {
    
    
}
const update = (row) => {
  
  router.push({
    name: 'activityDetail',
    query: {
      id: row.id
    }
  })
}

const ownerList=ref()
// 在组件挂载时调用获取用户列表
onMounted(() => {
    getData();
    loadOwer();
});

const formatDate = (date) => {
    if (!(date instanceof Date) || isNaN(date.getTime())) {
        return '';
    }
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const getData = () => {
   
    let startTime;
    let endTime;
    let createTime;
    for(let key in activityQuery.activityTime) {
        if(key==='0'){
            startTime = activityQuery.activityTime[0]
        }else if(key==='1'){
            endTime = activityQuery.activityTime[1]
        }
    }
    createTime= activityQuery.createTime
    // startTime = formatDate(new Date(startTime))
    // endTime = formatDate(new Date(endTime))
    // createTime=formatDate(new Date(activityQuery.createTime))
   

    Request.doGet('/api/activitys',{
        current: current.value,
        ownerId:activityQuery.ownerId,
        name:activityQuery.name,
        startTime:startTime,
        endTime:endTime,
        cost:activityQuery.cost,
        createTime:createTime
    }).then(res => {
        console.log(res)
        if(res.code == 200) {
            console.log(res.data)
            activityList.value = res.data.list
            
            total.value = res.data.total
            pageSize.value = res.data.pageSize
        }
        console.log(total.value )
        console.log(pageSize.value)
    })
}
const getDataFilter=()=>{
    Request.doGet('/api/activitys',{
        current: current.value,
        ownerId:activityQuery.ownerId,
        name:activityQuery.name,
        activityTime:activityQuery.activityTime,
        cost:activityQuery.cost,
        createTime:activityQuery.createTime
    }).then(res => {
        console.log(res)
        if(res.code == 200) {
            console.log(res.data)
            activityList.value = res.data.list

            total.value = res.data.total
            pageSize.value = res.data.pageSize
        }
        console.log(total.value )
        console.log(pageSize.value)
    })
}


const loadOwer=()=> {
    Request.doGet('/api/owner').then(res => {
        console.log(res)
        if(res.code == 200) {
            console.log(res.data)
            ownerList.value = res.data
        }
    })
}

const addActivity = () => {


}




</script>

<style lang="scss" scoped>

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>